import React from "react";
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import {Button, Layout,Avatar, Dropdown} from "antd";
import { MenuFoldOutlined } from  '@ant-design/icons'
import { collapseMenu } from '../../store/reducers/tab'
import './index.css'
const { Header } = Layout;
const CommonHeader = ({ isCollapsed }) => {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const logOut = () =>{
      localStorage.removeItem('react-app-token')
        navigate('/login')
    }
    const items = [
        {
            key: '1',
            label: (
                <a target="_blank" rel="noopener noreferrer">
                   个人中心
                </a>
            ),
        },
        {
            key: '2',
            label: (
                <a onClick={() => logOut()} target="_blank" rel="noopener noreferrer">
                   退出
                </a>
            ),
        },
    ];
    // 点击展开收起
    const setCollapsed = () => {
        dispatch(collapseMenu())
    }
    return (
        <Header className= "header-container">
            <Button
                type="text"
                icon={ <MenuFoldOutlined /> }
                style={{
                    fontSize: '16px',
                    width: 64,
                    height: 32,
                    backgroundColor: '#fff'
                }}
                onClick={ setCollapsed }
            />
            <Dropdown menu={ {items} } >
                <Avatar size={36} src={<img src={require('../../assets/images/user.png')} />} />
            </Dropdown>
        </Header>
    )
}
export default CommonHeader
